<!DOCTYPE html>
<html>
<head>
  <title>设置触发群关键自动处理配置</title>
</head>
<body>
<h1>设置触发群关键自动处理配置json</h1>

<form id="myForm">
  <fieldset>
    <legend>黑名单qq</legend>
    <div id="blackListContainer">
      <!-- 使用JavaScript动态添加输入框和删除按钮 -->
      <input type="number" min="1" max="9999999999" name="blackList" value="0">
    </div>
    <button type="button" onclick="addFieldItem('blackListContainer')">添加</button>
  </fieldset>

  <fieldset>
    <legend>群号</legend>
    <div id="groupIdContainer">
      <!-- 使用JavaScript动态添加输入框和删除按钮 -->
      <input type="number" min="1" max="9999999999" name="groupId" value="0">
    </div>
    <button type="button" onclick="addFieldItem('groupIdContainer')">添加</button>
  </fieldset>

  <fieldset>
    <legend>回应对象(判断是谁的消息才生效)</legend>
    <label><input type="radio" name="responseObject" value="qz"> 群主 </label>
    <label><input type="radio" name="responseObject" value="admin"> 管理员 </label>
    <label><input type="radio" name="responseObject" value="all" checked> 全部群成员 </label>
  </fieldset>

  <fieldset>
    <legend>Is At</legend>
    <label><input type="radio" name="isAt" value="true"> 是(at本机器) </label>
    <label><input type="radio" name="isAt" value="false" checked> 否(不at) </label>
  </fieldset>

  <fieldset>
    <legend>Is Reply</legend>
    <label><input type="radio" name="isReply" value="true"> 是(回复本机器人) </label>
    <label><input type="radio" name="isReply" value="false" checked> 否(不是回复) </label>
  </fieldset>

  <fieldset>
    <legend>Is Qz</legend>
    <label><input type="radio" name="isQz" value="true"> 是(是群主) </label>
    <label><input type="radio" name="isQz" value="false" checked> 否 </label>
  </fieldset>

  <fieldset>
    <legend>Is Admin</legend>
    <label><input type="radio" name="isAdmin" value="true"> 是(是管理) </label>
    <label><input type="radio" name="isAdmin" value="false" checked> 否 </label>
  </fieldset>

  <fieldset>
    <legend>Is All</legend>
    <label><input type="radio" name="isAll" value="true"> 是(at全员) </label>
    <label><input type="radio" name="isAll" value="false" checked> 否 </label>
  </fieldset>

  <fieldset>
    <legend>Regex Key(正则表达式判断是否处理消息)</legend>
    <input type="text" name="regexKey" value="\\b(你好|在吗)\\b">
  </fieldset>

  <fieldset>
    <legend>Msg Type(机器人怎么处理这条消息)</legend>
    <label><input type="radio" name="msgType" value="" checked> 不填直接发送 </label>
    <label><input type="radio" name="msgType" value="at"> at(艾特ta) </label>
    <label><input type="radio" name="msgType" value="reply"> reply(回复ta) </label>
    <label><input type="radio" name="msgType" value="jinyan"> jinyan(禁言此人) </label>
    <label><input type="radio" name="msgType" value="t"> t(t出群) </label>
    <label><input type="radio" name="msgType" value="ch"> ch(撤回消息) </label>
    <label><input type="radio" name="msgType" value="si"> si(群私聊消息) </label>
  </fieldset>

  <fieldset>
    <legend>Send Msg</legend>
    <textarea name="sendMsg">正则匹配成功回复文本内容</textarea>
  </fieldset>

  <fieldset>
    <legend>json结构的关键词</legend>
    <div id="ttt">
      <!-- 使用JavaScript动态添加输入框和删除按钮 -->
      <input type="text" name="blackList" value="0">
    </div>
    <button type="button" onclick="addFieldItemText('ttt')">添加</button>
  </fieldset>

  <button type="button" onclick="generateJSON()">生成JSON</button>
</form>

<div id="jsonContainer">
  <!-- 这里将显示生成的JSON结构 -->
</div>

<script>
  // 阻止表单默认提交行为
  document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();
  });

  // 添加按钮点击事件处理函数
  function addFieldItem(containerId) {
    var container = document.getElementById(containerId);
    var input = document.createElement("input");
    input.type = "number";
    input.min = "1";
    input.max = "9999999999";
    input.name = containerId.replace("Container", "");
    container.appendChild(input);

    var deleteButton = document.createElement("button");
    deleteButton.innerText = "删除";
    deleteButton.onclick = function() {
      container.removeChild(input);
      container.removeChild(deleteButton);
    };
    container.appendChild(deleteButton);
  }

  // 添加按钮点击事件处理函数
  function addFieldItemText(containerId) {
    var container = document.getElementById(containerId);
    var input = document.createElement("input");
    input.type = "text";
    input.name = containerId.replace("Container", "");
    container.appendChild(input);

    var deleteButton = document.createElement("button");
    deleteButton.innerText = "删除";
    deleteButton.onclick = function() {
      container.removeChild(input);
      container.removeChild(deleteButton);
    };
    container.appendChild(deleteButton);
  }

  function generateJSON() {
    var form = document.getElementById("myForm");
    var formData = new FormData(form);

    // 将FormData对象转换为键值对对象
    var jsonData = {};
    for (var pair of formData.entries()) {
      if (jsonData[pair[0]]) {
        // 如果该字段已经存在于JSON对象中，则将其转换为数组
        if (!Array.isArray(jsonData[pair[0]])) {
          jsonData[pair[0]] = [jsonData[pair[0]]];
        }
        jsonData[pair[0]].push(pair[1]);
      } else {
        jsonData[pair[0]] = pair[1];
      }
    }

    // 将JSON对象转换为字符串
    var jsonString = JSON.stringify(jsonData, null, 2);

    // 将JSON字符串显示在页面上
    document.getElementById("jsonContainer").innerText = jsonString;
  }
</script>
</body>
</html>